<template>
    <div class="typePage">
        <!-- 左侧分类  start -->
        <ScrollView>
            <div>
                <aside v-for="(item, index) in typeLeftData" :key="index"
                  @click=" reloadRightData(item.maitKey,item.miniWallkey,index) "
                   :class=" {'select':i==index} ">
                    <div> {{item.title}} </div>
                </aside>
            </div>
        </ScrollView>
        <!-- 左侧分类  end -->
        <!-- 右侧分类  start -->
        <ScrollView>
            <div>
                <!-- 详情分类  start -->
                <Category :CategoryData="typeRightSort" :num="3"/>
                <!-- 详情分类  end -->
                <div>
                    <span :style="sort=='pop'?'color:#f6486e;':''" @click=" changeSort('pop')">综合</span>
                    <span :style="sort=='sell'?'color:#f6486e;':''" @click=" changeSort('sell')">销量</span>
                    <span :style="sort=='new'?'color:#f6486e;':''" @click=" changeSort('new')">新品</span>
                </div>
                <div>
                    <GoodsItem :GoodsData = "rightGoods"/>
                </div>
            </div>
        </ScrollView>
        <!-- 右侧分类  start -->
    </div>
</template>

<script>
import GoodsItem from "../components/GoodsItem";

export default {
    components: {
        GoodsItem
    },
    data() {
        return {
            typeLeftData:[],
            typeRightSort:[],
            i:0,
            sort:"pop",
            rightGoods:[],
            fcid:""
        };
    },
    methods: {
        // 1.首先加载左侧数据
        setTypeLeftData(){
            this.$api.loadTypeLeft({
                appPlat:"m",
                pids:117330
            })
            .then((data)=>{
                this.typeLeftData = data[117330].list;
                // 因为右侧分类数据是根据左侧maitKey点击查询，要先初始化一个正在流行的数据
                if(!data[117330].list[0]){
                    return Promise.reject({msg:"请求失败"});
                }
                let pid = data[117330].list[0].maitKey;
                // 因为右侧物品数据是根据左侧miniWallkey点击查询，要先初始化一个正在流行的数据
                let fcid = data[117330].list[0].miniWallkey;
                this.fcid = fcid;
                //2. 加载右侧分类数据  
                this.setTypeRightData(pid);
                //3. 加载右侧物品数据  
                this.setGoodsData(fcid);
            })
            .catch(this.$error);
        },
        // 加载右侧分类数据
        setTypeRightData(pid){
            let params = {
                appPlat:"m",
                pid:pid
            }
            this.$api.loadTypeRight(params)
            .then((data)=>{
                this.typeRightSort = data.list;
            })
        },
        // 加载右侧物品数据
        setGoodsData(fcid,sort="pop"){
            this.sort = sort;
            let params={
                fcid:fcid,
                page:1,
                sort:sort,
                cKey:"h5-cube",
            };
            this.$api.loadGoodsItem(params)
            .then((data)=>{
                this.rightGoods = data.wall.docs;
            })
            .catch(this.$error);
        },
        //点击左侧改变maitKey，miniWallkey的值
        reloadRightData(pid,fcid,i){
            this.i = i;
            this.fcid = fcid;
            this.typeRightSort = [];
            this.rightGoods = [];
            this.setTypeRightData(pid);
            this.setGoodsData(fcid);
        },
        changeSort(sort){
            this.rightGoods = [];
            this.setGoodsData(this.fcid,sort);
        }
    },
    mounted() {
        this.setTypeLeftData();
    }
};
</script>

<style lang="less" scoped>
.select {
    background-color: @white;
    div {
        border-left: 10px solid @pink;
    }
}
.typePage {
    width: 100vw;
    position: absolute;
    top: @h;
    bottom: @h;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    > div:first-child {
        width: 25%;
        background-color: @ef;
        aside {
            height: 100px;
            font-size: 30px;
            font-weight: bold;
            display: flex;
            align-items: center;
            div {
                flex-grow: 1;
                text-align: center;
            }
        }
    }
    > div:last-child {
        width: 75%;
        > div {
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            > div:nth-child(2){
                float: left;
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                padding: 20px 0;
                margin-top: 20px;
                border-top: 1px solid @de;
                border-bottom: 1px solid @de;
                span {
                    flex-grow: 1;
                    text-align: center;
                }
                span:first-child {
                    border-right: 1px solid @de;
                }
                span:last-child {
                    border-left: 1px solid @de;
                }
            }
            >div:last-of-type{
                float: left;
            }
        }
    }
}
</style>